<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label for=""><input id="quanxuan" type="checkbox" />鲜花</label>
    <label for=""><input type="checkbox" />啤酒</label>
    <label for=""><input type="checkbox" />火箭</label>
    <label for=""><input type="checkbox" />跑车</label>
    <label for=""><input type="checkbox" />穿云箭</label>
    <br />
    <br />

    <button onclick="quanxuan()">全选</button>
    <button onclick="quxiao()">取消</button>
    <button onclick="fanxuan()">反选</button>

    <script>
      var quanxuans = document.getElementById("quanxuan");
      var check = document.getElementsByTagName("input");
      //   var btn = document.getElementsByTagName("button");

      //   btn[0].onclick = function () {
      //     for (var i = 0; i < check.length; i++) {
      //       check[i].checked = true;
      //     }
      //   };
      //   btn[1].onclick = function () {
      //     for (var i = 0; i < check.length; i++) {
      //       check[i].checked = false;
      //     }
      //   };
      //   btn[2].onclick = function () {
      //     for (var i = 0; i < check.length; i++) {
      //       check[i].checked = !check[i].checked;
      //     }
      //   };

      quanxuans.onclick = function () {
        if (check[0].checked) {
          for (var i = 0; i < check.length; i++) {
            check[i].checked = true;
          }
        }
      };
      function quanxuan() {
        for (var i = 0; i < check.length; i++) {
          check[i].checked = true;
        }
      }
      function quxiao() {
        for (var i = 0; i < check.length; i++) {
          check[i].checked = false;
        }
      }
      function fanxuan() {
        for (var i = 0; i < check.length; i++) {
          check[i].checked = !check[i].checked;
        }
      }
    </script>
  </body>
</html>
